<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- 信息 -->
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    <title>鸽子分享网</title>
    <meta name="author" content="尘跃" />
    <meta
        name="description"
        content="鸽子分享网"
    />


    <!-- Facebook Open Graph -->
    <meta property="og:title" content="鸽子分享网" />
    <meta property="og:type" content="website">
    <meta property="og:url" content="http://cyue.net">
    <meta property="og:image" content="/favicon.png" />
    <meta property="og:site_name" content="鸽子分享网" />
    <meta
        property="og:description"
        content="鸽子分享网"
    />

    <!-- Twitter Cards -->
    <meta name=twitter:card content="summary" />
    <meta name=twitter:image content="/favicon.png" />
    <meta name="twitter:title" content="鸽子分享网" />
    <meta name=twitter:description content="鸽子分享网" />
    <meta name="twitter:creator" content="@尘跃" />
    <meta name="twitter:site" content="@cyue.net" />


    <!-- style -->
    <link rel="stylesheet/less" type="text/css" href="/css/style.less">
    <!-- less -->
    <script src="/js/third/less.min.js"></script>

    <!-- swiper -->
    <link rel="stylesheet" href="/css/third/swiper-bundle.min.css">
    <style>
        .swiper {
            --swiper-theme-color: rgba(0, 0, 0, 0.1);
            --swiper-navigation-color: #ffffff;/* 单独设置按钮颜色 */
            --swiper-navigation-size: 2em;/* 设置按钮大小 */

            position: absolute;
            top: 0;
            left: 0;
        }
        .swiper,
        .swiper-wrapper,
        .swiper-slide {
            width: 100%;
            height: 100%;
        }
        .swiper-pagination {
            text-align: right;
            padding-right: 0.5rem;
        }
        .swiper a,
        .swiper a * {
            cursor: default;
            text-decoration: none;
        }

        .swiper .title-row {
            position: absolute;
            bottom: 0%;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.1);

            box-sizing: border-box;
            padding: 0.5em;
        }
        .swiper .title-row .title {
            cursor: pointer;
            color: white;
            background-color: transparent;
        }
        .swiper .title-row .subtitle {
            color: #B9B9B9;
            background-color: transparent;
        }
        .swiper .title-row .title,
        .swiper .title-row .subtitle {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            max-width: 80%;
        }
    </style>

    <!-- Vue3 -->
    <script src="/js/vue/vue.global.prod.js"></script>
    <!-- website configuration -->
    <script src="/js/configuration.js"></script>
    <!-- 百度统计 -->
    <script src="/js/tongji.js"></script>
    <!-- WX JS SDK -->
    <script src="/js/wx.js"></script>
    <!-- Google ADS -->
    <!-- <meta name="google-adsense-account" content="ca-pub-7556556693775855">
    <script
        async
        src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7556556693775855"
        crossorigin="anonymous"
    ></script>
    <script async src="https://fundingchoicesmessages.google.com/i/pub-7556556693775855?ers=1" nonce="VsH8KWqVA8vExpivjcdQtw"></script><script nonce="VsH8KWqVA8vExpivjcdQtw">(function() {function signalGooglefcPresent() {if (!window.frames['googlefcPresent']) {if (document.body) {const iframe = document.createElement('iframe'); iframe.style = 'width: 0; height: 0; border: none; z-index: -1000; left: -1000px; top: -1000px;'; iframe.style.display = 'none'; iframe.name = 'googlefcPresent'; document.body.appendChild(iframe);} else {setTimeout(signalGooglefcPresent, 0);}}}signalGooglefcPresent();})();</script> -->
</head>
<body>

    <page-header></page-header>


    <main style="display: none;">
        <!-- 内容展示 -->
        <div class="panel">
            <!-- 文章推荐 -->
            <div class="panel-banner">
                <div class="swiper rounded">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="item in newestArticleDataSource">
                            <a :href="'/pages/article.html?id=' + item.id" target="_blank">
                                <img
                                    :data-src="item.cover"
                                    src="/images/image.loading.png"
                                    :alt="item.title"
                                    @load="imgLoad"
                                    @error="imgError"
                                />
                                <div class="title-row">
                                    <h3 class="title">{{ item.title }}</h3>
                                    <p class="subtitle">{{ item.content || item.contentData.content }}</p>
                                </div>
                            </a>
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>

                    <!-- 如果需要导航按钮 -->
                    <!-- <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div> -->

                    <!-- 如果需要滚动条 -->
                    <!-- <div class="swiper-scrollbar"></div> -->
                </div>
            </div>

            <!-- 文章列表 -->
            <!-- <hr> -->
            <div class="spacer"></div>
            <div class="panel-article">
                <!-- 分类块 -->
                <div></div>

                <!-- 文章块 -->
                <div>
                    <!-- 文章列表 -->
                    <ul class="list-article" v-auto-animate>
                        <li v-for="item in articleDataSource">
                            <a :href="'/pages/article.html?id=' + item.id" target="_blank">
                                <img
                                    :data-src="item.cover"
                                    src="/images/image.loading.png"
                                    :alt="item.title"
                                    @load="imgLoad"
                                    @error="imgError"
                                />
                            </a>
                            <div class="information">
                                <div class="information-title">
                                    <a
                                        :href="'/pages/article.html?id=' + item.id"
                                        target="_blank"
                                    >
                                        {{ item.title }}
                                    </a>
                                </div>
                                <span class="information-detail">
                                    {{ item.content || item.contentData.content }}
                                </span>
                                <div class="meta">
                                    <ul>
                                        <li>{{ item.date }}</li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                    </ul>

                    <!-- 加载下一页 -->
                    <button
                        v-show="!articleFinished"
                        :disabled="articleLoading"
                        class="panel-article-button-more"
                        @click="loadNextPageArticle()"
                    >
                        查看更多
                    </button>
                </div>
            </div>

        </div>

        <!-- 侧边栏 -->
        <aside class="box-aside" v-auto-animate>
            <!-- 文章归档 -->
            <page-article-archive></page-article-archive>
        </aside>

        <!-- 配置音乐播放器 -->
        <div
            id="gui-MusicPlayer"
            data-cdnName="https://y.cenguigui.cn/js"
            data-fadeOutAutoplay
            data-themeColor="gui-wineRed"
        ></div>
    </main>
    <!-- 占位块 -->
    <div class="flex-1"></div>


    <page-footer></page-footer>


    <!-- web component -->
    <script src="/js/component.js"></script>

    <!-- Vue APP -->
    <script src="/js/http.js"></script>
    <script type="module">
        // AutoAnimate
        import { autoAnimatePlugin } from "/js/third/auto-animate-vue.mjs";

        const { createApp } = Vue;
        const app = createApp({
            async mounted() {
                const articleCountResult = await HTTP.request({
                    method: "GET",
                    url: "/api/article/count"
                }, false);
                if (articleCountResult.type === "success") {
                    this.articleCount = articleCountResult.data;
                }

                await this.loadNextPageArticle(false);
                this.newestArticleDataSource = this.articleDataSource.slice(0, 5);
                if (this.newestArticleDataSource.length === 0) {
                    this.newestArticleDataSource.push({
                        cover: "/images/image.loading.png",
                        title: "title",
                        textContent: "nothing"
                    });
                }
                // 显示 main
                document.getElementsByTagName("main")[0].style.display = "flex";
            },

            data() {
                return {
                    newestArticleDataSource: [],

                    loadedArticlePage: 0,
                    articleCount: 0,
                    articleLoading: false,
                    articleFinished: false,
                    articleDataSource: [],
                };
            },
            watch: {

            },

            methods: {
                async loadNextPageArticle(reload = false) {
                    if (this.articleLoading) {
                        return;
                    }
                    if (reload) {
                        this.loadedArticlePage = 0;
                        this.loadNextPageArticle(false);
                    }
                    if (this.articleFinished) {
                        return;
                    }

                    this.articleLoading = true;
                    try {
                        const response = await HTTP.request({
                            method: "get",
                            url: `/api/article/page/${++this.loadedArticlePage}`,
                        });
                        const result = response.data;
                        // console.log(result);
                        if (result.type === "success") {
                            const articleArray = result.data;

                            // 没有更多了
                            if (articleArray.length === 0) {
                                this.loadedArticlePage--;
                                this.articleFinished = true;
                                return;
                            }

                            for(const article of articleArray) {
                                if (article.content && article.content.length > 200) {
                                    article.content = article.content.slice(0, 200) + "......";
                                }
                            }
                            // this.articleDataSource.push(...articleArray);
                            this.articleDataSource = this.articleDataSource.concat(articleArray);
                            if (this.articleDataSource.length >= this.articleCount) {
                                this.articleFinished = true;
                            }
                        } else {
                            this.loadedArticlePage--;
                        }

                    } catch (e) {
                        console.error(e);
                        this.loadedArticlePage--;
                    }
                    this.articleLoading = false;
                },

                async imgLoad(event) {
                    const img = event.target;
                    if (img.loaded) {
                        return;
                    }
                    if (!img.getAttribute("data-src")) {
                        img.src = "/images/image.default.png";
                        return;
                    }

                    const { src } = img.dataset;
                    if (src) {
                        img.src = src;
                        img.loaded = true;
                    }
                    img.removeAttribute("data-src");
                },
                async imgError(event) {
                    const img = event.target;
                    img.src = "/images/image.error.png";
                    img.error = true;
                },
            }
        });
        app.use(autoAnimatePlugin);
        app.mount("main");
    </script>


    <!-- style -->
    <script src="/js/style.js"></script>
    <!-- swiper -->
    <!-- <script src="/js/third/color-thief.min.js"></script> -->
    <script src="/js/third/swiper-bundle.min.js"></script>
    <script type="module">
        const swiper = new Swiper ('.swiper', {
            loop: true, // 循环模式选项
            autoplay:true,

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
                clickable :true,
            },

            // 如果需要前进后退按钮
            // navigation: {
            //     nextEl: '.swiper-button-next',
            //     prevEl: '.swiper-button-prev',
            // },

            // 如果需要滚动条
            // scrollbar: {
            //     el: '.swiper-scrollbar',
            // },
        });

        // setTimeout(() => {
        //     const colorThief = new ColorThief();
        //     const bannerElement = document.getElementsByClassName("panel-banner")[0];
        //     const imgElements = bannerElement.getElementsByTagName("img");
        //     for (const img of imgElements) {
        //         const defaultBackgroundColor = getComputedStyle(document.body).backgroundColor;
        //         img.addEventListener("mouseenter", () => {
        //             const colors = colorThief.getPalette(img, 3);
        //             const rgbValues = colors.map(color => `rgb(${color[0]}, ${color[1]}, ${color[2]})`);
        //             console.log(rgbValues);

        //             document.body.style.setProperty(
        //                 "--color-theme",
        //                 `radial-gradient(${rgbValues[0]}, ${rgbValues[1]}, ${rgbValues[2]})`
        //             );
        //         });
        //         img.addEventListener("mouseleave", () => {
        //             document.body.style.setProperty("--color-theme", defaultBackgroundColor);
        //         })
        //     }
        // }, 1000);
    </script>

    <script src="/js/android.js"></script>

    <!-- 引入音乐播放器外部CDN插件 -->
    <script>
        if (!window.navigator.userAgentData.mobile) {
            const script = document.createElement('script');
            script.src = "https://y.cenguigui.cn/js/gui-MusicPlayer/js/gui-MusicPlayer.min.js";
           //  document.write(script.outerHTML);
        }
    </script>
</body>
</html>

